<template>
  <div>
    <el-popover class="module-h5GoodsCover" placement="right" width="480" trigger="click">
        <div class="setting-container-goods">
            <header>
                <div class="sub-item">商品【滑动模式】<span>(拖动商品排序)</span></div>
                <!--<a href="javascript:;" class="remove-btn" type="text" @click="()=>{ remove(moduleIndex); }">删除模块</a>-->
            </header>
            <section>
              <el-form-item label="锚点设置:" prop="is_anchor_point" style="margin: 10px 0">
                <div class="flex-container anchor-point-container">
                  <el-checkbox v-model="data.is_anchor_point" @change="(value)=>{data.anchor_point_name = ''; updateAnchorPoint()}">设为锚点</el-checkbox>
                  <div>
                    <el-input :disabled="!data.is_anchor_point" v-model="data.anchor_point_name" placeholder="请输入锚点名称" maxLength="10" @change="updateAnchorPoint"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="背景图片:" prop="module_background_image" style="margin: 10px 0">
                <el-upload
                        class="avatar-uploader"
                        accept="image/*"
                        :action="upladUrl"
                        name="file"
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="(res) => {data.module_background_image = res.filePath}">
                    <img v-if="data.module_background_image" :src="data.module_background_image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-button type="text" @click="data.module_background_image=''">移除背景图</el-button>
              </el-form-item>
                <el-form-item label="一屏显示:" prop="show_num" label-width="150px" style="padding: 6px 0 6px;margin-bottom: 0; background: #f7f7f7">
                    <el-radio-group v-model="data.show_num">
                        <el-radio :label="2">2个</el-radio>
                        <el-radio :label="3">3个</el-radio>
                        <el-radio :label="4">4个</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="goods-container">
                    <draggable v-model="data.content_list" :options="{group:'content_list'}" @start="drag=true" @end="drag=false">
                        <div v-for="(item, i) in data.content_list" :key="i" class="goods">
                            <i class="el-icon el-icon-close remove-btn" @click="data.content_list.splice(i, 1)"></i>
                            <img :src="item.pic"/>
                        </div>
                    </draggable>
                </div>
                <div class="btn-box" style="margin-top: 12px">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="chooseGoods" plain>添加商品</el-button>
                    <el-button type="success" icon="el-icon-plus" size="small" @click="chooseGoodsPackage" plain>添加套餐</el-button>
                    <el-button type="danger" icon="el-icon-plus" size="small" @click="chooseGoodsBhs" plain >添加碧划算</el-button>
                    <el-button icon="el-icon-plus" size="small" @click="chooseBoxGoods" plain >添加箱起商品</el-button>
                </div>
            </section>
        </div>
        <div slot="reference" class="goods-list scroll-list" :id="`moduleForm${moduleIndex}`">
            <div v-if="data.content_list.length" :style="`width: ${data.content_list.length*(318/(data.show_num-0.5)+8)}px; min-width: 100%`">
                <div class="goods-item" v-for="(item, i) in data.content_list" :key="i" :style="`width: ${318/(data.show_num-0.5)}px`">
                    <div class="img" :style="`background: url(${item.pic}) center center;`"></div>
                    <div class="detail-name">{{item.title}}</div>
                    <div class="detail-sub-name" v-if="data.show_num===2">{{item.subtitle}}</div>
                    <div class="detail-price">{{item.type!=35?'￥':''}}{{item.price}} <span v-if="data.show_num !== 4">{{item.type!=35?'￥':''}}{{item.marketValue}}</span></div>
                </div>
            </div>
            <div v-else :style="`width: ${data.show_num*(318/(data.show_num-0.5)+8)}px; min-width: 100%`">
                <div class="goods-item" v-for="(item, i) in data.show_num" :key="i" :style="`width: ${318/(data.show_num-0.5)}px`">
                    <div class="img"></div>
                    <div class="detail-name">商品名称商品名称商品名称</div>
                    <div class="detail-sub-name" v-if="data.show_num===2">商品副标题商品副标题商品副标题</div>
                    <div class="detail-price">{{item.type!=35?'￥':''}}768 <span v-if="data.show_num !== 4">{{item.type!=35?'￥':''}}1098</span></div>
                </div>
            </div>
        </div>
    </el-popover>
  </div>
</template>
<script>
  import draggable from 'vuedraggable';
  import boxChoosMixin from './boxChoosMixin.js';
  export default {
    name: 'H5GoodsCover',
    mixins: [boxChoosMixin],
    props: {
      moduleIndex: {
        type: Number,
        default: 0
      },
      data: {
        type: Object,
        default: {},
      },
      updateAnchorPoint: {
        type: Function
      },
      remove: {
        type: Function
      }
    },
    components: {
      draggable
    },
    methods: {
       chooseGoodsBhs() {
         let selected = this.data.content_list.filter(item => item.type === 88) //帅选非碧划算数据为已选数据
         this.bhsGoodsChoose(2, selected, true).then(val => {
            this.data.content_list = this.data.content_list.filter(item=>item.type !==88).concat(val.map(item => {
            return {
                goodsId: item.goodsId,
                goods_id: item.goodsId || item.goods_id,
                pic: item.imageUrl || item.pic,
                title: item.title,
                subtitle: item.title,
                marketValue: item.originalPrice || item.marketValue,
                price: item.actualPrice || item.price,
                type: 88,
                plateform:'ALI'
              }
            })
          )
        })
      },
      chooseGoods(){
        let selected = this.data.content_list.filter(item=>item.type===1).map(item => {
          return {
            goodsId: item.goods_id,
            image: item.pic,
            name: item.title,
            subName: item.subtitle,
            marketValue: item.marketValue,
            price: item.price
          }
        });
        this.goodsChoose({count: this.data.show_num}, selected).then(val => {
          this.data.content_list = this.data.content_list.filter(item=>item.type !==1).concat(val.map(item => {
            return {
              goods_id: item.goodsId,
              pic: item.image.includes('?x-oss-process=image/resize') ? item.image : item.image + '?x-oss-process=image/resize,m_fill,h_400,w_400',
              title: item.name,
              subtitle: item.subName,
              marketValue: item.marketValue,
              price: item.price,
              type: 1,
              from_type: 1
            }
          }))
        });
      },
      chooseGoodsPackage(){
        let selected = this.data.content_list.filter(item=>item.type===2).map(item => {
          return {
            packageId: item.goods_id,
            image: item.pic,
            name: item.title,
            subTitle: item.subtitle,
            marketValue: item.marketValue,
            price: item.price,
            type: item.pack_type
          }
        });
        this.packageChoose({}, selected).then(val => {
          this.data.content_list = this.data.content_list.filter(item=>item.type !==2 ).concat(val.map(item => {
            return {
              goods_id: item.packageId,
              pic: item.image.includes('?x-oss-process=image/resize') ? item.image : item.image + '?x-oss-process=image/resize,m_fill,h_400,w_400',
              title: item.name,
              subtitle: item.subTitle,
              marketValue: item.marketValue,
              price: item.price,
              pack_type: item.type,
              type: 2,
              from_type: 3
            }
          }))
        });
      }
    }
  }
</script>
<style lang="scss">
    @import "../../../../styles/mixin";
    .setting-container-goods{
        header{
            @include flex;
            @include a-center;
            border-bottom: 1px solid #efefef;
            padding-bottom: 6px;

            .sub-item{
                @include sub-item;
                span{
                    color: #999;
                    font-size: 12px;
                }
            }
            .remove-btn{
                color: red;
            }


        }

        .anchor-point-container{
          @include a-center;

          .label{
            padding-right: 10px;
          }

          .el-input{
            margin-left: 10px;
          }
        }

        .goods-container{
            @include scrollbar;
            max-height: 420px;

            .goods{
                width: 80px;
                height: 80px;
                display: inline-block;
                margin: 12px 8px 0 0;
                position: relative;
                img{
                    width: 100%;
                    max-height: 80px;
                }
                .remove-btn{
                    color: #fff;
                    font-size: 14px;
                    border-radius: 50%;
                    background: red;
                    top: -5px;
                    right: -5px;
                    position: absolute;
                    z-index: 9;
                    cursor: pointer;
                }
            }
        }
        .add-btn{
            @include flex;
            @include center;
            width: 80px;
            height: 80px;
            border: 1px solid #cdcdcd;
            margin-top: 12px;
            cursor: pointer;
            i{
                color: #cdcdcd;
                font-size: 32px;
            }
        }
    }
    .goods-list{
        padding: 8px;
        &.scroll-list{
            @include scrollbar(3);
            width: 100%;

            .goods-item {
                padding: 6px;
                background: #fff;
                border-radius: 8px;
                margin-right: 8px;
                display: inline-block;

                .img {
                    width: 100%;
                    height: 0;
                    padding-bottom: 100%;
                    background: url("../../../../assets/common/default_goods_pic.png") center center;
                    background-size: cover !important;
                }
                .detail-name {
                    @include text-ellipsis;
                    color: #333;
                    font-size: 15px;
                    padding-top: 8px;
                }
                .detail-sub-name {
                    @include text-ellipsis;
                    color: #999;
                    font-size: 13px;
                    padding-top: 4px;
                }
                .detail-price {
                    @include text-ellipsis;
                    color: red;
                    font-size: 16px;
                    margin-top: 12px;

                    span {
                        color: #666;
                        font-size: 12px;
                        text-decoration: line-through;
                    }
                }

                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
    .btn-box{
      display: flex;
    }
    .flex-container .module{
      cursor: default;
    }
</style>
